<template>
    <div id="branch-tag">
        <el-popover placement="right" trigger="click" @after-enter="clickShow">
            <el-table :data="tableData" stripe border size="mini" v-loading="loading">
                <el-table-column width="180" show-overflow-tooltip property="branchKey" label="静态分支编码"></el-table-column>
                <el-table-column width="200" show-overflow-tooltip property="branchName" label="分支名称"></el-table-column>
                <el-table-column width="80" show-overflow-tooltip property="branchNo" label="分支序号"></el-table-column>
                <el-table-column width="180" show-overflow-tooltip label="分支计算结果">
                    <template slot-scope="scope">
                        <el-tooltip placement="top" :content="scope.row.chinese">
                            <span>{{ scope.row.branchValue != undefined ? getFormat(scope.row.branchValue, 2) : '--' }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-tag slot="reference" size="mini">{{ data.branchNum }}个分支</el-tag>
        </el-popover>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { numberFormat, NumberToWords, sortBy, numberFormatXDAY, getConfigItem } from '@/utils/tools';
import { getInstructionResultBranchDetail } from '@/common/api/instruction';

@Component({
    name: 'BranchTag',
})
export default class BranchTag extends Vue {
    numberFormat = numberFormat;
    numberFormatXDAY = numberFormatXDAY;
    WEB_DOCKING = getConfigItem('WEB_DOCKING');
    @Prop() data: any;

    private tableData: any[] = undefined;

    private loading: boolean = false;

    getFormat(val, formatParam?) {
        if (this.WEB_DOCKING === 'CIBFUND') {
            return numberFormatXDAY(val);
        }
        return numberFormat(val, formatParam);
    }

    clickShow() {
        this.loading = true;

        getInstructionResultBranchDetail(this.data.requestId, this.data.entryKey, this.data.groupCode, this.data.stockCode).then(res => {
            this.loading = false;
            this.tableData = res || [];
            this.tableData.sort(sortBy('branchNo', 'asc'));
            for (let i = 0; i < this.tableData.length; i++) {
                const item = this.tableData[i];
                item.chinese = NumberToWords(Number.parseFloat(item.branchValue).toFixed(2));
                // item.chinese = NumberToWords(item.branchResult.toFixed(2));
            }
            // console.log('this.tableData', this.tableData);
        });
    }
}
</script>

<style lang="scss" scoped>
#status-tag {
    display: inline-block;
    & /deep/ .el-tag--blue {
        border-color: transparent;
    }
}
</style>
